{% load i18n %}
<div class="panel panel-default">
{#        <div class="panel-heading">Acccccccc#}
{#        </div>#}
        <div id = "profile-user-table" class="panel-body compact-bottom">
            <table class="table table-hover">
              <tbody>
                <tr>
                  <td>{% trans "Login ID:"%}</td>
                  <td>{{ user.username }}</td>
                </tr>
                <tr>
                  <td>{% trans "First Name"%}</td>
                  <td>{{ user.first_name }}</td>
                </tr>
                <tr>
                  <td>{% trans "Last Name"%}</td>
                  <td>{{ user.last_name }}</td>
                </tr>
                <tr>
                  <td>{% trans "Email"%}</td>
                  <td>{{ user.email }}</td>
                </tr>
                <tr>
                    <td>{% trans "Billing Address"%}</td>
                    <td>{{ user.VpnUser.address }}</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>{{ user.VpnUser.address2 }}</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>{{ user.VpnUser.zipcode}} ,{{ user.VpnUser.city}} , {{ user.VpnUser.province}} , {{ user.VpnUser.country}}</td>
                </tr>
              </tbody>
            </table>
        </div><!-- panel-body table-responsive -->
<div class="panel-body compact-top">
    <div class = "col-md-4"></div>
    <div class = "col-md-4"></div>
    <div class = "col-md-4"><button type="button" class="btn btn-default btn-block" data-toggle="modal" data-target="#EditProfile" data-backdrop="static" >{% trans "Edit"%}</button></div>

</div>
</div><!-- panel panel-default -->